<template>
  <div>
    <el-card class="app-container">
      <div class="search">
        <el-form label-position="right" inline label-width="100px" size="mini">
          <el-form-item label="订单编号">
            <el-input placeholder="请输入完整订单编号" clearable class="search__item" v-model="searchParams.orderNo"/>
          </el-form-item>
          <el-form-item label="商品ID">
            <el-input placeholder="请输入完整商品ID" clearable class="search__item" v-model="searchParams.spuId"/>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input placeholder="请输入关键字" clearable class="search__item" v-model="searchParams.title"/>
          </el-form-item>
          <el-form-item label="收件人姓名">
            <el-input placeholder="请输入完整姓名" clearable class="search__item" v-model="searchParams.receiverUserName"/>
          </el-form-item>
          <br>
          <el-form-item label="订单下单时间">
            <el-date-picker
              v-model="searchParams.orderTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <!--        <el-form-item label="商品分类">-->
          <!--          <el-input placeholder="请输入商品名称" clearable class="search__item" v-model="searchParams.title"/>-->
          <!--        </el-form-item>-->
          <!--          <el-form-item label="累计销量">-->
          <!--            <el-row class="search__item">-->
          <!--              <el-col :span="10">-->
          <!--                <el-input-->
          <!--                  v-model="searchParams.minSales"-->
          <!--                  placeholder="最低值"-->
          <!--                  clearable-->
          <!--                  class="search__item search__item&#45;&#45;span"/>-->
          <!--              </el-col>-->
          <!--              <el-col :span="4" class="text-center">-</el-col>-->
          <!--              <el-col :span="10">-->
          <!--                <el-input-->
          <!--                  v-model="searchParams.maxSales"-->
          <!--                  placeholder="最高值"-->
          <!--                  clearable-->
          <!--                  class="search__item search__item&#45;&#45;span"-->
          <!--                />-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--          </el-form-item>-->
          <el-form-item label=" ">
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button type="default" @click="handleSearchFormClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="toolbar">
        <el-radio-group size="mini" v-model="searchParams.status" @change="loadData">
          <el-radio-button :label="o.id" v-for="o in statusOptions" :key="o.id">{{ o.name }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="data-table" style="margin-bottom: 10px">
        <table>
          <thead>
          <tr>
            <th width="350">商品信息</th>
            <th>订单/售后状态</th>
            <th>数量</th>
            <th>商品总价(元)</th>
            <th>实收金额(元)</th>
            <th>收货信息</th>
<!--            <th>买家</th>-->
            <th>操作/备注</th>
          </tr>
          </thead>
        </table>
      </div>
      <div v-loading="isLoading">
        <template v-if="dataList.length">
          <div class="data-table" v-for="item in dataList" :key="item.orderNo">
            <div class="data-table-header flex">
              <div class="flex-con">
                订单号：{{ item.orderNo }}
              </div>
              <div>
                成交时间：{{ item.gmtCreate }}
              </div>
            </div>
            <table>
              <tbody>
              <tr v-for="(row,rowIndex) in item.orderItemList" :key="rowIndex">
                <td width="350">
                  <div class="spu flex">
                    <el-image :src="row.skuImg" class="spu__img" :preview-src-list="[row.skuImg]"/>
                    <div class="spu__info">
                      <div class="spu__id">ID: {{ row.spuId }}</div>
                      <div class="spu__title">
                        {{ row.spuTitle }}
                      </div>
                      <div class="spu__sale_values">
                        {{ row.salePropValues }}
                      </div>
                      <div class="spu__after_sale_status">
                        {{ row.afterSaleStatus }}
                      </div>
                    </div>
                  </div>
                </td>
                <td :rowspan="item.orderItemList.length" v-if="rowIndex===0">
                  {{ item.status }}
                </td>
                <td>{{ row.skuNum }}</td>
                <td>
                  {{ row.skuPrice * row.skuNum | numberFormat }}
                </td>
                <td>
                  {{ row.realAmount }}
                </td>
                <td :rowspan="item.orderItemList.length" v-if="rowIndex===0">
                  <div class="receiver">
                    <div class="receiver__username">
                      {{ item.receiverName }}
                    </div>
                    <div class="receiver__username">
                      {{ item.receiverPhone }}
                    </div>
                    <div class="receiver__address">
                      {{ item.fullAddress }}
                    </div>
                  </div>
                </td>
<!--                <td :rowspan="item.orderItemList.length" v-if="rowIndex===0"></td>-->
                <td :rowspan="item.orderItemList.length" v-if="rowIndex===0" class="space-between">
                  <el-link type="primary" target="_blank">查看详情</el-link>
                  <el-button type="text" @click="handleSendOrder(row)" v-if="item.canSend" size="mini">发货</el-button>
<!--                  <el-button type="text" size="mini">添加备注</el-button>-->
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </template>
        <div v-else class="text-center data-empty">
          <el-empty/>
        </div>
      </div>

      <!--      <el-table-->
      <!--        title="商品列表"-->
      <!--        :data="dataList"-->
      <!--        v-loading="isLoading"-->
      <!--        border-->
      <!--        stripe-->
      <!--        header-row-class-name="table-header-row">-->
      <!--        <el-table-column label="商品信息" width="auto">-->
      <!--          <template slot-scope="scope">-->
      <!--            <div class="spu flex">-->
      <!--              <el-image :src="scope.row.mainImg" class="spu__img" :preview-src-list="[scope.row.mainImg]"/>-->
      <!--              <div class="spu__info">-->
      <!--                <div class="spu__id">ID: {{ scope.row.id }}</div>-->
      <!--                <div class="spu__title">-->
      <!--                  {{ scope.row.title }}-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="订单/售后状态" width="200" prop="collectedNum"/>-->
      <!--        <el-table-column label="数量" width="80" prop="num"/>-->
      <!--        <el-table-column label="商品总价(元)" width="140" prop="collectedNum"/>-->
      <!--        <el-table-column label="实收金额(元)" width="140" prop="collectedNum"/>-->
      <!--        <el-table-column label="收货信息" width="200">-->
      <!--          <template slot-scope="scope">-->
      <!--            <div class="receiver">-->
      <!--              <div class="receiver__username">-->
      <!--                {{ scope.row.receiverName }}-->
      <!--              </div>-->
      <!--              <div class="receiver__username">-->
      <!--                {{ scope.row.receiverPhone }}-->
      <!--              </div>-->
      <!--              <div class="receiver__address">-->
      <!--                {{ scope.row.fullAddress }}-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="买家" width="120" prop="collectedNum"/>-->
      <!--        <el-table-column label="操作/备注" width="200">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-button type="text" @click="handleSendOrder(scope.row)" v-if="scope.row.canSend" size="mini">发货</el-button>-->
      <!--            <el-button type="text" size="mini">添加备注</el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
      <div class="pager" v-if="dataCount>0">
        <el-pagination
          :total="dataCount"
          :page-size.sync="pageParams.pageSize"
          layout="total,sizes, prev, pager, next"
          :current-page.sync="pageParams.pageNo"
          @size-change="loadData"
          @current-change="loadData"/>
      </div>
    </el-card>
    <div class="btn-area-holder">
    </div>
    <div class="btn-area btn-area--fixed text-center">
      <!--      <el-button type="primary" size="small" :loading="isSubmitting" @click="handleSubmit">提交并上架</el-button>-->
      <el-button type="primary" size="small" @click="handleToNewSpu">批量导入发货</el-button>
    </div>
    <el-dialog
      :visible.sync="showSendDialog"
      title="批量导入发货"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh">
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        虚假发货严重的可能会被处以店铺二级限制（商品移除资源位，移除广告，禁止上新，禁止上架）：
        <br>
        1.导入单号24小时内可修改，填错单号可能会被判虚假发货
        <br>
        2.请先揽件后导入，导入后24小时内无揽件信息会被判虚假发货
        <br>
        3.单次最多可批量发货的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left">
          <a href="/template/import_example_sellJadeite.d0acfbe6.xlsx" target="_blank">
            下载发货模板
          </a>
        </div>
        <file-uploader title="上传发货文件" icon="" size="mini" type="primary" action="/api/"/>
        <div class="flex-con"></div>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import {spuApi} from '@/feature/pdt/infra/api/spuApi'
import FormUtil from "@/framework/infra/form/FormUtil";
import SpuStatusEnum from "@/feature/pdt/infra/constants/SpuStatusEnum";
import {orderApi} from "@/feature/oms/infra/api/orderApi";
import OrderStatusEnum from "@/infra/constant/OrderStatusEnum";
import FileUploader from "@/framework/components/FileUploader";

export default {
  components: {FileUploader},
  filters: {
    numberFormat(v) {
      return v.toFixed(2)
    }
  },
  data() {
    return {
      dataList: [],
      showSendDialog: false,
      searchParams: {
        orderTime: [],
        spuId: '',
        orderNo: '',
        minSales: '',
        maxSales: '',
        status: OrderStatusEnum.WAIT_SEND.id,
        title: '',
        receiverUserName: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      statusOptions: OrderStatusEnum.getValues(),
      isLoading: true,
      dataCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    handleToNewSpu() {
      this.showSendDialog = true
    },
    handleSearchFormClear() {
      FormUtil.reset(this.searchParams, {}, ['status'])
      this.loadData()
    },
    loadData() {
      this.isLoading = true
      orderApi.list({...this.searchParams, ...this.pageParams}).then(data => {
        this.dataList = data.data
        this.dataCount = data.total
      }).finally(() => {
        this.isLoading = false
      })
    },
    handleSendOrder(row) {

    }
  }
}
</script>

<style lang="scss" scoped>
.spu {
  align-items: flex-start;

  &__img {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    border: 1px solid #eee;
  }

  &__info {
    flex: 1;
    padding-left: 10px;
    color: #666;
    font-size: 12px;
  }

  &__title {
    color: #2656bd;
    line-height: 18px;
  }

  &__status {
    color: #333;
    font-size: 12px;
  }
}

.receiver {
  font-size: 13px;
  color: #666;
}

.pager {
  padding-top: 20px;
}

.search {
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 10px;
  padding-top: 20px;
  box-sizing: border-box;

  &__item {
    width: 240px;

    &--span {
      width: 100%;
    }
  }
}

a {
  color: #409EFF;
  font-size: 12px;
}

.toolbar {
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
